<template>
  <el-form class="right-event-msg">
    <dropdown-normal label="计时类型" :valLists="TIMER_TYPES" v-model="wbData.type" @change="onUpdateWbComponent"></dropdown-normal>
    <el-form-item label="开始时间" v-if="wbData.type == TIMER_TYPES_MAP.countdownTime">
      <el-date-picker v-model="wbData.time" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
    </el-form-item>
    <el-form-item label="截止时间" v-else-if="wbData.type == TIMER_TYPES_MAP.positiveTime">
      <el-date-picker v-model="wbData.time" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
    </el-form-item>
    <el-form-item label="倒计时时间(秒数)" v-else-if="wbData.type == TIMER_TYPES_MAP.activityCountdownTime || wbData.type == TIMER_TYPES_MAP.countdown">
      <!-- <el-date-picker v-model="wbData.time" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker> -->
      <input-normal v-model="wbData.countdown" @change="onUpdateWbComponent"></input-normal>
    </el-form-item>
    <el-form-item label="开始截止时间" v-else-if="wbData.type == TIMER_TYPES_MAP.activityStartEndTime">
      <el-date-picker v-model="wbData.time" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
      <el-date-picker v-model="wbData.endTime" type="datetime" placeholder="选择日期时间" @change="onUpdateWbComponent"></el-date-picker>
    </el-form-item>
    <dropdown-normal label="结束动作" :valLists="getLists(PAGE_TYPE_.pop)" v-model="wbData.popId" @change="onUpdateWbComponent"></dropdown-normal>
  </el-form>
</template>

<script>
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'

  import { addUtils } from '@/views/js/add-utils'
  import { TIMER_TYPES, TIMER_TYPES_MAP, PAGE_TYPE_ } from '@/common/const'

  export default {
    mixins: [addUtils],
    setup () {
      return {
        TIMER_TYPES: TIMER_TYPES,
        TIMER_TYPES_MAP: TIMER_TYPES_MAP,
        PAGE_TYPE_: PAGE_TYPE_,
      }
    },
    components: {
      DropdownNormal,
      InputNormal,
    },
    methods:{
      onUpdateWbComponent(){
        if(this.wbData.type == TIMER_TYPES_MAP.activityCountdownTime){
          this.wbData.time = '';
          // delete this.wbData.pageId
        }
        this.updateWbComponent({controlId: this.event.controlId, data: this.wbData});
      },
    }
  }
</script>
